JavaScript Module Federation Plugin-arkitektur: Bygging av et dynamisk plugin-system

I dagens komplekse webutviklingslandskap er det avgjørende å bygge modulære, skalerbare og vedlikeholdbare applikasjoner. En kraftig teknikk for å oppnå dette er gjennom en plugin-arkitektur, der funksjonalitet brytes ned i uavhengige, dynamisk lastede moduler. JavaScript Module Federation, en funksjon i Webpack 5, gir en robust mekanisme for å implementere slike arkitekturer. Denne artikkelen går i dybden på detaljene ved å bruke Module Federation til å bygge et dynamisk plugin-system.

Hva er Module Federation?

Module Federation lar JavaScript-applikasjoner dele kode dynamisk under kjøring. Dette betyr at en modul (en kodebit) fra én applikasjon kan brukes direkte av en annen applikasjon, uten å måtte bygges om eller distribueres på nytt. Dette oppnås ved å eksponere og konsumere moduler på tvers av forskjellige bygg og til og med forskjellige distribusjoner.

Tradisjonelle metoder for kodedeling, som npm-pakker, krever ombygging og redistribusjon av forbrukende applikasjoner hver gang en delt avhengighet oppdateres. Module Federation eliminerer denne overheaden, noe som gjør den ideell for scenarier der hyppige oppdateringer og uavhengige distribusjoner er nødvendig.

Hvorfor bruke Module Federation for Plugin-arkitekturer?

Module Federation tilbyr flere fordeler når du bygger plugin-arkitekturer:

• Dynamisk Modullasting: Plugins kan lastes og losses under kjøring, slik at applikasjoner kan tilpasse seg endrede krav uten å kreve en fullstendig redistribusjon.
• Dekobling: Plugins utvikles og distribueres uavhengig, noe som reduserer avhengigheter mellom forskjellige deler av applikasjonen.
• Skalerbarhet: Applikasjonen kan enkelt utvides med nye plugins uten å påvirke eksisterende funksjonalitet.
• Vedlikeholdbarhet: Plugins kan oppdateres og vedlikeholdes uavhengig, noe som reduserer risikoen for å introdusere feil i kjerneapplikasjonen.
• Gjenbruk av kode: Plugins kan gjenbrukes på tvers av flere applikasjoner, noe som fremmer konsistens og reduserer utviklingsarbeidet.
• Versjonskontroll og Tilbakerulling: Du kan administrere forskjellige versjoner av plugins og enkelt rulle tilbake til tidligere versjoner om nødvendig.

Kjernekonsepter: Verts- og Eksterne Containere

Module Federation dreier seg om to nøkkelkonsepter:

• Vertscontainer: Hovedapplikasjonen som konsumerer de eksterne modulene (plugins).
• Ekstern container: Applikasjonen som eksponerer moduler (plugins) som skal konsumeres av verten.

Vertscontaineren henter dynamisk den eksterne oppføringsfilen fra den eksterne containeren, som inneholder et manifest over eksponerte moduler. Verten kan deretter få tilgang til og bruke disse modulene som om de var en del av sin egen kodebase.

Implementering av et dynamisk plugin-system med Module Federation: En trinnvis veiledning

La oss gå gjennom prosessen med å bygge et enkelt plugin-system ved hjelp av Module Federation. Vi skal lage en vertsapplikasjon og en ekstern plugin-applikasjon.

1. Sette opp vertsapplikasjonen (Vertscontainer)

Først oppretter du en ny prosjektkatalog og initialiserer et nytt npm-prosjekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Installer Webpack og dets avhengigheter:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Opprett en `webpack.config.js`-fil i `host-app`-katalogen med følgende konfigurasjon:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Forklaring:

• `name`: Navnet på vertsapplikasjonen.
• `remotes`: Definerer de eksterne containerne som verten vil konsumere. I dette tilfellet konsumerer den en ekstern container som heter `plugin` fra `http://localhost:3001/remoteEntry.js`. Syntaksen `Plugin@` betyr at den eksterne ModuleFederationPlugin sitt `name` er 'Plugin'.
• `shared`: Lister opp avhengighetene som deles mellom verts- og eksterne containere. Dette forhindrer at dupliserte kopier av disse avhengighetene lastes inn. Bruk av `shared` er avgjørende for å unngå feil og sikre riktig plugin-funksjonalitet.

Opprett en `src`-katalog og legg til en `index.js`-fil med følgende innhold:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Forklaring:

• Vi bruker `React.lazy` til å importere `PluginComponent` dynamisk fra `plugin`-ekstern. Dette er avgjørende for å laste inn pluginen sent og unngå forsinkelser ved første innlasting.
• `Suspense`-komponenten brukes til å håndtere lastetilstanden mens pluginen hentes.

Opprett en `public`-katalog og legg til en `index.html`-fil med følgende innhold:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Legg til en Babel-konfigurasjonsfil `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Oppdater `package.json` med et startskript:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Sette opp den eksterne applikasjonen (Plugin-container)

Opprett en ny prosjektkatalog for pluginen:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Installer Webpack og dets avhengigheter:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Opprett en `webpack.config.js`-fil i `plugin-app`-katalogen med følgende konfigurasjon:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Forklaring:

• `name`: Navnet på den eksterne containeren (plugin). Dette **må** samsvare med navnet som brukes i vertens `remotes`-konfigurasjon.
• `filename`: Navnet på den eksterne oppføringsfilen som verten vil hente.
• `exposes`: Definerer modulene som er eksponert av den eksterne containeren. I dette tilfellet eksponerer vi `PluginComponent`-modulen. Nøkkelen './PluginComponent' brukes i vertens importsetning (f.eks. `import('plugin/PluginComponent')`).
• `shared`: Samme som verten, lister opp de delte avhengighetene. Det er viktig at de delte avhengighetene og deres versjoner er kompatible mellom verten og den eksterne.

Opprett en `src`-katalog og legg til en `PluginComponent.jsx`-fil med følgende innhold:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Opprett en `index.js`-fil i `src`-katalogen for å eksportere PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Opprett en `public`-katalog og legg til en `index.html`-fil med følgende innhold:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Legg til en Babel-konfigurasjonsfil `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Oppdater `package.json` med et startskript:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Kjøre applikasjonene

Start både verts- og plugin-applikasjonene ved å kjøre `npm start` i deres respektive kataloger.

Naviger til `http://localhost:3000` i nettleseren din. Du skal se vertsapplikasjonen med den dynamisk lastede plugin-komponenten.

Avanserte funksjoner og hensyn

Versjonskontroll og Tilbakerulling

Module Federation støtter versjonskontroll, slik at du kan administrere forskjellige versjoner av plugins. Du kan spesifisere versjonsbegrensninger i vertens `remotes`-konfigurasjon. For eksempel:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Dette forteller verten å bruke versjon 1.0.0 av pluginen. Hvis en nyere versjon er tilgjengelig, vil verten fortsette å bruke den spesifiserte versjonen til den er eksplisitt oppdatert. Implementering av robust versjonskontroll er avgjørende for å forhindre bruddendringer og sikre applikasjonsstabilitet.

Sikkerhetshensyn

Når du bruker Module Federation, er sikkerhet avgjørende. Vurder følgende:

• Autentisering og autorisasjon: Implementer riktige autentiserings- og autorisasjonsmekanismer for å sikre at bare autoriserte brukere kan få tilgang til og bruke plugins.
• Kodeintegritet: Bekreft integriteten til de eksterne modulene for å forhindre at ondsinnet kode injiseres i applikasjonen. Vurder å bruke Content Security Policy (CSP) for å begrense kildene som applikasjonen kan laste ressurser fra.
• Avhengighetsadministrasjon: Administrer avhengighetene til både verts- og eksterne containere nøye for å unngå sårbarheter. Oppdater avhengigheter regelmessig til de nyeste versjonene.
• Inputvalidering: Valider alle data som mottas fra eksterne moduler for å forhindre injeksjonsangrep.
• CORS (Cross-Origin Resource Sharing): Konfigurer CORS riktig for å tillate at vertsapplikasjonen får tilgang til den eksterne oppføringsfilen fra plugin-applikasjonen.

Plugin-oppdagelse og -administrasjon

For mer komplekse plugin-systemer kan du trenge en mekanisme for å oppdage og administrere plugins. Dette kan oppnås gjennom et plugin-register eller en oppdagelsestjeneste. Et sentralt register kan lagre informasjon om tilgjengelige plugins, inkludert deres plassering, versjon og avhengigheter. Vertsapplikasjonen kan deretter spørre registeret for å finne og laste inn de riktige pluginene.

Vurder disse tilnærmingene:

• Sentralisert konfigurasjon: Lagre plugin-URL-er i en sentral konfigurasjonsfil (f.eks. en JSON-fil) som vertsapplikasjonen leser under kjøring. Dette lar deg enkelt legge til, fjerne eller oppdatere plugins uten å distribuere vertsapplikasjonen på nytt.
• API-basert oppdagelse: Opprett et API-endepunkt som returnerer en liste over tilgjengelige plugins. Vertsapplikasjonen kan deretter hente denne listen og laste inn pluginene dynamisk.
• Hendelsesdrevet arkitektur: Bruk en hendelsesbuss eller meldingskø for å varsle vertsapplikasjonen når nye plugins er tilgjengelige. Dette gir mulighet for asynkron plugin-oppdagelse og -lasting.

Dynamisk konfigurasjon og plugin-aktivering

Å tillate brukere å dynamisk konfigurere og aktivere plugins er en kraftig funksjon. Dette krever en mekanisme for å lagre og administrere plugin-konfigurasjoner. Du kan bruke en database, en konfigurasjonsfil eller en skybasert konfigurasjonstjeneste for å lagre plugin-innstillinger. Vertsapplikasjonen kan deretter lese disse innstillingene under kjøring og aktivere pluginene deretter. Vurder å tilby et brukergrensesnitt for å administrere plugin-konfigurasjoner.

Håndtering av asynkrone operasjoner og feilhåndtering

Når du arbeider med dynamisk lastede plugins, er det viktig å håndtere asynkrone operasjoner og feil på en elegant måte. Bruk `async/await` eller Promises for å administrere asynkron kode. Implementer riktig feilhåndtering for å fange opp og logge eventuelle feil som oppstår under lasting eller kjøring av plugin. Gi informative feilmeldinger til brukeren. Vurder å bruke en sentralisert feilloggingstjeneste for å spore feil på tvers av alle plugins.

Kodesplitting og ytelsesoptimalisering

For å optimalisere ytelsen, bruk kodesplitting for å bryte ned applikasjonen og plugins i mindre biter. Dette lar nettleseren bare laste ned koden som er nødvendig for en bestemt side eller funksjon. Webpack gir innebygd støtte for kodesplitting. Vurder å bruke lazy loading for å laste inn plugins bare når de er nødvendige. Minimer og komprimer koden for å redusere filstørrelsen.

Testing og kontinuerlig integrasjon

Test plugin-systemet ditt grundig for å sikre at det fungerer som det skal. Skriv enhetstester, integrasjonstester og ende-til-ende-tester. Bruk et system for kontinuerlig integrasjon (CI) for automatisk å kjøre tester hver gang koden endres. Implementer en kontinuerlig leveringspipeline (CD) for å automatisere distribusjonen av applikasjonen og plugins.

Virkelige eksempler og brukstilfeller

Module Federation brukes i en rekke virkelige applikasjoner, inkludert:

• E-handelsplattformer: Laster inn produktanbefalinger, betalingsløsninger og leverandører dynamisk. For eksempel kan en global e-handelsplattform bruke Module Federation til å integrere forskjellige betalingsleverandører basert på kundens beliggenhet. I Nord-Amerika kan den laste inn en plugin for Stripe, mens den i Europa kan laste inn en plugin for PayPal eller Klarna.
• Innholdsadministrasjonssystemer (CMS): Tillater brukere å installere og aktivere plugins for å utvide funksjonaliteten til CMS. Et CMS kan tillate brukere å installere plugins for SEO-optimalisering, integrasjon av sosiale medier eller innholdsanalyse.
• Dashboards og analyseplattformer: Laster inn forskjellige widgets og visualiseringer dynamisk. En global analyseplattform kan laste inn plugins for forskjellige datakilder, for eksempel Google Analytics, Adobe Analytics eller Salesforce.
• Microfrontend-arkitekturer: Bygger storskala webapplikasjoner som en samling av uavhengig distribuerbare microfrontends. En stor bedrift kan bruke Module Federation til å bygge sin webapplikasjon som en samling av microfrontends, hver ansvarlig for en spesifikk forretningsfunksjon, for eksempel kontoadministrasjon, produktkatalog eller ordrebehandling.
• Designsystemer: Deler UI-komponenter og designtokens på tvers av flere applikasjoner. En global organisasjon med flere merkevarer kan bruke Module Federation til å dele et felles designsystem på tvers av alle sine applikasjoner, noe som sikrer konsistens og reduserer utviklingsarbeidet.

Beste praksis for å bygge dynamiske plugin-systemer med Module Federation

Her er noen beste fremgangsmåter du bør huske på når du bygger dynamiske plugin-systemer med Module Federation:

• Hold plugins små og fokuserte: Hver plugin skal være ansvarlig for en spesifikk funksjonalitet. Dette gjør det lettere å vedlikeholde og oppdatere pluginene.
• Definer klare plugin-grensesnitt: Definer klare grensesnitt for hvordan plugins samhandler med vertsapplikasjonen. Dette sikrer at plugins er kompatible med verten og forhindrer bruddendringer.
• Bruk semantisk versjonskontroll: Bruk semantisk versjonskontroll for å administrere versjonene av pluginene dine. Dette gjør det lettere å spore endringer og sikre kompatibilitet.
• Gi dokumentasjon: Gi tydelig og konsis dokumentasjon for pluginene dine. Dette hjelper brukere med å forstå hvordan de installerer, konfigurerer og bruker pluginene.
• Implementer beste sikkerhetspraksis: Følg beste sikkerhetspraksis for å beskytte applikasjonen og pluginene dine mot sårbarheter.
• Overvåk plugin-ytelse: Overvåk ytelsen til pluginene dine for å identifisere eventuelle flaskehalser. Optimaliser koden for å forbedre ytelsen.
• Automatiser distribusjon: Automatiser distribusjonen av applikasjonen og pluginene dine. Dette reduserer risikoen for feil og sikrer at oppdateringer distribueres raskt.
• Bruk en konsistent kodestil: Håndhev en konsistent kodestil på tvers av alle plugins. Dette gjør koden lettere å lese og vedlikeholde.
• Skriv enhetstester: Skriv enhetstester for pluginene dine for å sikre at de fungerer som de skal.
• Bruk en linter: Bruk en linter for automatisk å sjekke koden din for feil.

Konklusjon

JavaScript Module Federation gir en kraftig og fleksibel mekanisme for å bygge dynamiske plugin-systemer. Ved å utnytte Module Federation kan du lage modulære, skalerbare og vedlikeholdbare applikasjoner som kan tilpasse seg endrede krav. Ved å følge beste praksis som er skissert i denne artikkelen, kan du bygge robuste og sikre plugin-systemer som oppfyller behovene til organisasjonen din.

Denne teknologien er spesielt verdifull i internasjonale sammenhenger, og gjør det mulig for bedrifter å skreddersy sine programvaretilbud til spesifikke regioner eller kundesegmenter uten å distribuere fullstendig separate applikasjoner. Fra integrering av lokale betalingsløsninger til levering av regionspesifikt innhold, letter Module Federation en mer personlig og effektiv brukeropplevelse globalt.